<template>
    <div>
        <!-- [5]tab导航分类标签页:通过名称匹配的方式进行选中 -->
        <van-nav-bar title="乐购" left-text="返回" left-arrow  @click-left="onClickLeft"/>
        <!-- 根据点击导航栏找到相应id name -->
        <van-tabs v-model="active" @click="Select">
            <van-tab :title="item.name" :name="item.name" v-for="item in list" :key="item.id"></van-tab>
        </van-tabs>
            <div class="content">
                <!-- 标题 -->
            <div class="top">
                <p>{{currentNav.name}}</p>
                <p>{{currentNav.front_desc}}</p>
            </div>
            <ul v-if="goodsList.length!=0">
              <router-link tag="li"  :to="`/home/newCategoryList?id=${item.id}`"
              v-for="item in goodsList" :key="item.id">
                <!-- <li v-for="item in goodsList" :key="item.id"> -->
                <img :src="item.list_pic_url" alt="">
                <p class="one">{{item.name}}</p>
                <P class="two">¥{{item.retail_price}}</P>
                <!-- </li> -->
              </router-link>
            </ul>
            <p v-else class="false">数据库暂无数据...</p>
            </div>
    </div>
</template>

<script>
// [6]调取接口
import { categoryNav } from "@/api/category/categorylist"
import{goodsList} from "@/api/category/categorylist"
export default {
    data() {
        return {
            list:[],
            active:"",
            currentNav:"",
            goodsList:[]
        };
    },
    computed: {

    },
    // [7]
    async created() {
        await categoryNav({
            id:this.$route.query.id
        })
        .then(res =>{
            console.log(res);
            // [8]
            console.log(res.currentNav.name);
            this.active = res.currentNav.name
            this.list = res.navData;
            this.currentNav=res.currentNav;
            // console.log(this.currentNav);
        });
        await goodsList({
            categoryId:this.currentNav.id
        }).then((res)=>{
            console.log(res);
            this.goodsList = res.data;
        })
    },
    mounted() {

    },
    methods: {
        onClickLeft(){
            this.$router.go(-1);
        },
        // 点击时再请求一次数据
        Select(name){
            var item =this.list.find((el)=>el.name==name);
            categoryNav({
                id:item.id,
            }).then((res)=>{
                console.log(res);
                this.active=res.currentNav.name;
                this.list=res.navData;
                this.currentNav=res.currentNav
            });
            // 同样的下面商品列表
            goodsList({
                categoryId:item.id,//接口命名的id
            }).then((res)=>{
                console.log(res);
                this.goodsList=res.data
            })
            
        }
    },
};
</script>

<style scoped lang="scss" scoped>

    .content{
        overflow: hidden;
        background-color: #f4f4f4;
        width: 100%;
    .top{
        background-color: #fff;
        height: 86px;
        width: 100%;
        height: 101px;
        // line-height: 86px;
        margin: 0 auto;
        text-align: center;
        margin-top: 10px;
        p:nth-child(1){
            font-size: 12px;
            padding-top: 25px;
        }
        p:nth-child(2){
            height: .32rem;
            font-size: .32rem;
            color: #999;
        }
    }
    ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: #fff;
        li{
            width: 186px;
            background-color: oldlace;
            margin-bottom: 5px;
            
           img{
               width: 151px;
               height: 151px;
               margin:5px;   
           }
           .one{
               font-size: 12px;
               color: slateblue;
           }
           .two{
               color: palevioletred;
               font-size: 18px;
           }

        }
    }
 }

</style>
